<template>
  <div class="app-container">
    <div class='maindiv'>
      <!-- {{ e }} -->
      <div class="ces-main">
        <!-- style=" width: 350px;position: absolute;top: -2px;right: -20px;" -->
        <!-- style="position: absolute;top: 5px;right: 2px;top:8px" -->
        <Search-Form ref="form" size='mini' labelWidth='50px' :searchData='SearchGroup' :tableCols='tableCols'
          :searchHandle="searchHandle" @handleEnter="refresh"></Search-Form>
        <v-GetToolBar style="position: absolute;right: 2px;top:11px" align="right" :key="MenuCode" :MenuCode='MenuCode'
          :IsfunEdit='IsfunEdit' :Isfunfail='Isfunfail' @handeAdd='handeAdd' @handleEdit='handleEdit'
          @OpenFindForm='searchTop' @handlexportData='handlexportData' @IsfunEdit='handleIsfunEdit'
          @IsfunDelete='handleIsfunfail' @handleclose='handleclose'></v-GetToolBar>

        <ces-table :ToolBarheight="ToolBarheight" size='mini' :isSelection='false' :isIndex='true' :isSearch='true'
          :isHandle='false' :IsfunEdit='IsfunEdit' :Isfunfail='Isfunfail' :tableData='tableData' :tableCols='tableCols'
          :Search='SearchGroup' @refresh="refresh" @handleEdit='handleEdit' @handleDelete="delData"
          @handrowclick="handrowclick">
        </ces-table>
      </div>

      <div class="midMain">
        <Search-Form ref="form" size='mini' labelWidth='50px' :searchData='SearchGroupInfo' :tableCols='tableColsInfo'
          :searchHandle="searchHandle" @handleEnter="refresh"></Search-Form>
        <v-GetToolBar class='GetToolBar' align="right" :key="MenuCode" :MenuCode='MenuCode' :IsfunEdit='IsfunEdit'
          :Isfunfail='Isfunfail' @handeAdd='handeAdd' @handleEdit='handleEdit' @OpenFindForm='handrowclick(0)'
          @handlexportData='handlexportData' @IsfunEdit='handleIsfunEdit' @IsfunDelete='handleIsfunfail'
          @handleclose='handleclose'></v-GetToolBar>
        <ces-table :flag="false" :ToolBarheight="ToolBarheight" size='mini' :isSelection='false' :isIndex='true'
          :isSearch='true' :isHandle='false' :IsfunEdit='IsfunEdit' :Isfunfail='Isfunfail' :tableData='tableDataInfo'
          :tableCols='tableColsInfo' :Search='SearchGroupInfo' :key="key" @refresh="refresh"
          @handleEdit='handleEditInfo' @handleDelete="delDataInfo" @handrowclick="handrowclick">
        </ces-table>
      </div>
    </div>

    <!--搜索弹框-->
    <el-dialog title="搜索" :visible.sync="SearchDialog" custom-class="dialogClass" class="searchDialog" center
      ref="searchDialog" :modal="false" :close-on-click-modal="true">
      <el-form :model="SearchGroup" label-width="90px" ref="searchForm">

        <Search-Form ref="form" :frame="true" size='mini' labelWidth='50px' :searchData='Search' :tableCols='tableCols'
          :searchHandle="searchHandle" @handleEnter="refresh"></Search-Form>
      </el-form>
      <div slot="footer" :style="{ 'margin-buttom': 0 == 0 ? DialogBtnMargin : DialogBtnMargin }">
        <el-button @click="reform()">重置</el-button>
        <el-button type="primary" @click="refresh()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" width="800px" top="20px">
      <!-- {{this.FormData}} -->
      <el-form :model="name" label-width="80px" label-position="right">
        <el-tabs type="border-card">
          <el-tab-pane label="">
            <el-form :model="FormData" label-width="90px" ref="MianForm">
              <Mian-Form ref="form" labelWidth='100px' :FormData='FormData' :tableCols='tableCols' :StepSN='0'
                :searchHandle="searchHandle"></Mian-Form>
            </el-form>
          </el-tab-pane>
          <div style="float:right ">
            <el-button type="primary" @click="handleOpenClose()">关闭</el-button>
            <el-button type="primary" @click="handleSave()">保存</el-button>
          </div>
        </el-tabs>
      </el-form>
    </el-dialog>


    <el-dialog v-if="dialogVisibleInfo" :visible.sync="dialogVisibleInfo" width="800px" top="20px">
      <el-form :model="name" label-width="80px" label-position="right">
        <el-tabs type="border-card">
          <el-tab-pane label="">
            <el-form :model="FormDataInfo" label-width="90px" ref="MianForm">
              <Mian-Form ref="form" labelWidth='100px' :FormData='FormDataInfo' :tableCols='tableColsInfo' :StepSN='0'
                :searchHandle="searchHandle"></Mian-Form>
            </el-form>
          </el-tab-pane>
          <div style="float:right ">
            <el-button type="primary" @click="handleOpenClose()">关闭</el-button>
            <el-button type="primary" @click="handleSaveInfo()">保存</el-button>
          </div>
        </el-tabs>
      </el-form>
    </el-dialog>



  </div>
</template>

<script>


//引入组件

import cesTable from "../Common//ComVxeTable.vue";
// import cesTable from "../Common//table.vue";
import SearchForm from "../Common//Search.vue";
import MianForm from "../Common//form.vue";

import { funDownload, funDownloadv1, GetTableColsData } from "@/api/Common";
import { getDataList, DeleteForm, CloseForm, UpdateForm, getfunDownload, MenuUpdate } from '@/api/CommonPage/CommonPage'; //更改
import vGetToolBar from "../Common/GetToolBar";

export default {
  name: "ProcessGroup",
  data() {
    //表单查询一般分为input，下拉框，和日期，下面是下拉框时的设置下拉信息的情况，我的项目没有用到，但是留着方便看

    return {
      key: 1,
      see: {},
      input: '',
      ToolBarheight: null,
      Id: null,
      index: null,
      StagingDataInfo: null,
      technologyID: null,
      FormDataInfo: [],
      dialogVisibleInfo: false,
      MenuCode: "",
      tableData: [],//表格数据
      tableCols: [],//表格列数据
      FormData: [],//表格数据
      tableColsInfo: [],
      tableDataInfo: [],
      searchHandle: [],
      billID: "",
      IsfunEdit: true,
      Isfunfail: true,
      SearchGroup: {
        // 查询条件
        total: 0, // 总记录数
        pageSize: 100, // 一页显示的记录数
        page: 1, // /当前页码
        RNO: "1627", // 表编号  根据Controller中对应的表编号
        InterID: "1627",
        jsWhere: "", // 自定义条件
        Download: "",
        YearMonth: '',
        OrganizeID: '',
        LineName: "",
        IsFieldText: "0",
        // Status: 0,
        //   BillState: "BillStateALL",

      },
      SearchGroupInfo: {
        // 查询条件
        total: 0, // 总记录数
        pageSize: 100, // 一页显示的记录数
        page: 1, // /当前页码
        RNO: "1592", // 表编号  根据Controller中对应的表编号 //更改
        InterID: "1592",
        jsWhere: '', // 自定义条件
        Download: "",
        WorkingDate: [],
        OrganizeID: '',
        IsFieldText: "0",
      },

      cities: [
        {
          value: "ALL",
          label: "ALL",
        },
        {
          value: "0",
          label: "草稿",
        },
        {
          value: "1",
          label: "审核中",
        },
        {
          value: "2",
          label: "结案",
        },
        {
          value: "3",
          label: "作废",
        },
      ], BillStatecities: [
        {
          value: "BillStateALL",
          label: "ALL",
        },
        {
          value: "0",
          label: "未完成",
        },
        {
          value: "2",
          label: "已完成",
        }],
      SearchDialog: false,
      DialogBtnMargin: 0,
      dialogVisible: false,

    }
  },

  components: { //引入组件后注册组件
    cesTable,
    vGetToolBar,
    SearchForm,
    MianForm
  },
  mounted() {
    this.ToolBarheight = parseInt(document.documentElement.clientHeight * 0.67)
    // alert(this.ToolBarheight)
    // debugger
    this.getDataList()
  },

  methods: {
    async searchTop() {
      const res = await getDataList({ data: JSON.stringify(this.SearchGroup) });
      this.SearchGroup.total = res.data.Table1[0].RecordCount;
      this.tableData = res.data.Table;
    },
    refresh() {
      this.getDataList();
    },

    addTableDataInfo() {
      let data = {
        ProcessGroupInfoID: null,
        ProcessID: null,
        ProcessGroupID: this.technologyID,
        IsScheduling: null,
        PostProcessID: null,
        FixDay: null,
        AcquisitionTimes: null,
        OrganizeID: null,
        CreatedByName: null,
        ModifiedByName: null,
        CreatedOn: null,
        ModifyedOn: null,
      }
      this.FormDataInfo = data
      this.dialogVisibleInfo = true;
    },

    async addTableData() {
      let data = {
        ProcessGroupID: null,
        ProcessGroupName: null,
        OrganizeID: null,
        Status: null,
        CreatedBy: null,
        CreatedByName: null,
        ModifiedBy: null,
        ModifiedByName: null,
        CreatedOn: null,
        ModifyedOn: null,
        Remark1: null,
        Remark2: null,
        ByRegion: null,
        SchedulingSeq: null
      }
      this.FormData = data
      this.dialogVisible = true;
    },

    reform() {
      this.SearchGroup = {
        // 查询条件
        // total: 0, // 总记录数
        pageSize: 13, // 一页显示的记录数
        page: 1, // /当前页码
        RNO: "1626", // 表编号  根据Controller中对应的表编号 //更改
        InterID: "1626",
        jsWhere: "", // 自定义条件
        Download: "",
        //   Status: 0,
        //   BillState: "BillStateALL",
      };
      // this.Search.InterID = this.InterID;
      // this.Search.RNO = this.InterID;
      this.getDataList();
    },

    async getDataList() {
      //表头数据

      const res = await getDataList({ data: JSON.stringify(this.SearchGroup) });
      // debugger
      this.SearchGroup.total = res.data.Table1[0].RecordCount;
      this.tableData = res.data.Table;
      if (this.SearchGroup.IsFieldText !== "1") this.tableCols = res.data1;
      this.SearchGroup.IsFieldText = "1"; //已加载数据，不再加载

      this.SearchGroupInfo.jsWhere = `and  1 = 2`
      const resCols = await getDataList({ data: JSON.stringify(this.SearchGroupInfo) });
      if (this.SearchGroupInfo.IsFieldText !== "1") this.tableColsInfo = resCols.data1;
      this.SearchGroupInfo.IsFieldText = "1"; //已加载数据，不再加载
    },

    OpenFindForm() {
      // alert(JSON.stringify(this.tableCols))
      //打开搜索框
      this.SearchDialog = true;
      //计算外边距
      console.log(this.$refs.searchDialog.offsetHeight);
      this.DialogBtnMargin = this.$refs.searchDialog.offsetHeight - 40;
    },

    async handlexportData() {
      this.SearchGroup.Download = "1";
      const res = await getfunDownload({ data: JSON.stringify(this.SearchGroup) });
      this.SearchGroup.Download = "0";
      funDownloadv1(res); //更改
    },

    handleIsfunEdit() {
      this.IsfunEdit = true;
    }, handleIsfunfail() {
      this.Isfunfail = true;
    }, async handeAdd() {
      // 新建


      const result = await UpdateForm({ IsPostBack: false, InterID: this.InterID });
      this.FormData = result.data1.Table[0];
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.checkStrictly = true

      this.$nextTick(() => {
        const routes = this.generateRoutes(this.EditObj.routes)
        this.$refs.tree.setCheckedNodes(this.generateArr(routes))
        // set checked state of a node not affects its father and child nodes
        this.checkStrictly = false

      })
      this.getDataList();

      // let routeUrl = this.$router.push({
      //   path: "/MesPieceWork/CompleteProcedureRoportForm",//更改
      //   query: { billID: "", IsPostBack: false },
      // });
      // window.open(routeUrl.path, "_top");

    },
    async handleEdit(scope) {
      // alert(scope.row)
      // 修改
      this.dialogVisible = true
      const result = await UpdateForm({
        IsPostBack: false,
        InterID: this.SearchGroup.InterID,
        SavaDate: JSON.stringify(scope.row)
      });
      this.FormData = result.data1.Table[0];
      // alert(JSON.stringify(this.FormData))
      this.dialogType = 'edit'
      this.checkStrictly = true
      this.$nextTick(() => {
        const routes = this.generateRoutes(this.EditObj.routes)
        this.$refs.tree.setCheckedNodes(this.generateArr(routes))
        this.checkStrictly = false
      })
      // this.getDataList();
    },

    async handleEditInfo(scope) {
      this.index = scope.$index
      // alert(this.index)
      // 修改
      this.dialogVisibleInfo = true
      const result = await UpdateForm({
        IsPostBack: false,
        InterID: this.SearchGroupInfo.InterID,
        SavaDate: JSON.stringify(scope.row)
      });
      this.FormDataInfo = result.data1.Table[0];
      this.dialogType = 'edit'
      this.checkStrictly = true
      this.$nextTick(() => {
        const routes = this.generateRoutes(this.EditObj.routes)
        this.$refs.tree.setCheckedNodes(this.generateArr(routes))
        // set checked state of a node not affects its father and child nodes
        this.checkStrictly = false
      })
      // this.getDataList();
    },

    async handleSave() {
      // 修改
      const result = await UpdateForm({
        IsPostBack: true,
        InterID: this.SearchGroup.InterID,
        SavaDate: JSON.stringify(this.FormData)
      });
      // alert(JSON.stringify(this.FormData))
      this.FormData = result.data1.Table[0];
      if (result.code === 20000) {
        this.$notify({
          title: result.msg,
          dangerouslyUseHTMLString: true,
          message: "",
          type: "success",
        });
        this.getDataList();
      } else {
        this.$notify({
          title: result.msg,
          dangerouslyUseHTMLString: true,
          message: "",
          type: "error",
        });
      }
      this.getDataList();
      this.dialogVisible = false
    },

    async handleSaveInfo() {
      // 修改
      const result = await UpdateForm({
        IsPostBack: true,
        InterID: this.SearchGroupInfo.InterID,
        SavaDate: JSON.stringify(this.FormDataInfo)
      });

      this.FormDataInfo = result.data1.Table[0];
      // alert(JSON.stringify(this.StagingDataInfo))
      // let data = this.StagingDataInfo.filter(v=>v.ProcessGroupID == this.Id)
      // alert(JSON.stringify(data))
      // this.tableDataInfo = data;
      // this.tableDataInfo.splice(this.index,1,this.FormDataInfo)
      // alert(JSON.stringify(this.tableDataInfo))

      const resInfo = await getDataList({ data: JSON.stringify(this.SearchGroupInfo) });
      this.StagingDataInfo = resInfo.data.Table;
      let data = this.StagingDataInfo.filter(v => v.ProcessGroupID == this.Id)
      this.tableDataInfo = data
      // this.tableColsInfo = resInfo.data1;
      //将data 中的数据放到DataList中
      this.SearchGroupInfo.total = resInfo.data.Table1[0].RecordCount;

      if (result.code === 20000) {
        this.$notify({
          title: result.msg,
          dangerouslyUseHTMLString: true,
          message: "",
          type: "success",
        });
        this.getDataList();
      } else {
        this.$notify({
          title: result.msg,
          dangerouslyUseHTMLString: true,
          message: "",
          type: "error",
        });
      }
      this.getDataList();
      this.dialogVisibleInfo = false
      // alert(222)
    },

    async delData({ $index, row }) {
      this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(async () => {


          // this.see = row
          const result = await DeleteForm({
            InterID: this.SearchGroup.InterID,
            SavaDate: JSON.stringify(row),
            IsPostBack: false,
          });
          this.getDataList();
          // this.tableData.splice($index, 1);
          this.$message({
            type: "success",
            message: result.msg,
          });

        })
        .catch((err) => {
          console.error(err);
        });
    },

    delDataInfo({ $index, row }) {
      this.$confirm('删除操作, 是否继续?', '提示', {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(async () => {
          const result = await DeleteForm({
            InterID: this.SearchGroupInfo.InterID,
            SavaDate: JSON.stringify(row),
            IsPostBack: false,
          });
          // this.tableData.splice($index, 1);
          const resInfo = await getDataList({ data: JSON.stringify(this.SearchGroupInfo) });
          this.StagingDataInfo = resInfo.data.Table;
          let data = this.StagingDataInfo.filter(v => v.ProcessGroupID == this.Id)
          this.tableDataInfo = data
          // this.getDataList();
          this.$message({
            type: "success",
            message: result.msg,
          });

        })
        .catch((err) => {
          console.error(err);
        });
    },

    async handrowclick(row) {
      if (row !== 0) {
        this.Id = row.row.OrganizeID;
        this.SearchGroupInfo.OrganizeID = row.row.OrganizeID
      }
      this.SearchGroupInfo.jsWhere = '';
      const resInfo = await getDataList({ data: JSON.stringify(this.SearchGroupInfo) });
      this.SearchGroupInfo.total = resInfo.data.Table1[0].RecordCount;
      this.tableDataInfo = resInfo.data.Table;
      this.technologyID = row.ProcessGroupID

      // this.key = this.key === 1 ? this.key + 1 : 2
    },

    handleOpenClose() {
      this.dialogVisible = false
      this.dialogVisibleInfo = false
    }, handleclose() {


      if (this.billID != "") {

        this.$confirm('关单操作, 是否继续? 订单号：' + this.billID, '提示', {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
        })
          .then(async () => {



            const result = await CloseForm({

              billID: this.billID,
              types: 1,
              IsPostBack: false,
            });
            this.getDataList();
            this.$message({
              type: "success",
              message: result.msg,
            });

          })
          .catch((err) => {
            console.error(err);
          });
      } else {
        this.$notify({
          title: "关单操作，请选择数据" + this.billID,
          dangerouslyUseHTMLString: true,
          message: "",
          type: "error",
        });
      }



    },


  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  overflow: hidden;

  .EditObjs-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 5px;
  }

  .maindiv {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .ces-main {
      position: relative;
      flex: 1;
      width: 80vw;
      overflow: outo;
    }

    .midMain {
      padding-top: 12px;
      width: 80vw;
      flex: 1;
      position: relative;

      .GetToolBar {
        position: absolute;
        right: 2px;
        top: 23px
      }
    }
  }
}



.searchDialog ::v-deep .el-dialog__header {
  background: #409eff;
}

.searchDialog ::v-deep .el-dialog__title {
  color: #fff;
}

.searchDialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>